<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记忆翻牌配对游戏</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 1000px;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
            overflow: hidden;
            padding: 30px;
        }
        
        header {
            text-align: center;
            margin-bottom: 25px;
        }
        
        h1 {
            color: #2c3e50;
            font-size: 2.8rem;
            margin-bottom: 10px;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .subtitle {
            color: #7f8c8d;
            font-size: 1.2rem;
            margin-bottom: 20px;
        }
        
        .game-info {
            display: flex;
            justify-content: space-between;
            background: linear-gradient(135deg, #74ebd5, #9face6);
            padding: 15px 25px;
            border-radius: 15px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .info-item {
            text-align: center;
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .info-value {
            font-size: 1.8rem;
            color: #2c3e50;
            margin-top: 5px;
        }
        
        .difficulty {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .difficulty-btn {
            padding: 10px 20px;
            background: #3498db;
            color: white;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            font-weight: 600;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .difficulty-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        
        .difficulty-btn.active {
            background: #e74c3c;
            transform: translateY(-3px);
            box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
        }
        
        .game-board {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 15px;
            perspective: 1000px;
            margin-bottom: 25px;
        }
        
        /* 难度级别对应的网格布局 */
        .difficulty-easy { grid-template-columns: repeat(4, 1fr); }
        .difficulty-medium { grid-template-columns: repeat(5, 1fr); }
        .difficulty-hard { grid-template-columns: repeat(6, 1fr); }
        
        .card {
            height: 120px;
            border-radius: 12px;
            cursor: pointer;
            position: relative;
            transform-style: preserve-3d;
            transition: transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
        }
        
        .card.flipped {
            transform: rotateY(180deg);
        }
        
        .card-face {
            position: absolute;
            width: 100%;
            height: 100%;
            backface-visibility: hidden;
            border-radius: 12px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 2.5rem;
        }
        
        .card-front {
            background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
            transform: rotateY(180deg);
        }
        
        .card-back {
            background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .card-back i {
            color: rgba(255, 255, 255, 0.7);
            font-size: 2.5rem;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        
        .btn {
            padding: 14px 35px;
            font-size: 1.1rem;
            font-weight: 600;
            border: none;
            border-radius: 50px;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }
        
        .btn-restart {
            background: linear-gradient(135deg, #ff9a9e, #fad0c4);
            color: #2c3e50;
        }
        
        .btn-new-game {
            background: linear-gradient(135deg, #a1c4fd, #c2e9fb);
            color: #2c3e50;
        }
        
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        .victory {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.8);
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 100;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.5s ease;
        }
        
        .victory.active {
            opacity: 1;
            pointer-events: all;
        }
        
        .victory-content {
            background: white;
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            max-width: 500px;
            width: 90%;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
        }
        
        .victory h2 {
            font-size: 3rem;
            color: #e74c3c;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #ff6b6b, #4ecdc4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        .victory-stats {
            font-size: 1.4rem;
            margin: 20px 0;
        }
        
        .victory-stats span {
            font-weight: bold;
            color: #e74c3c;
        }
        
        .fireworks {
            position: absolute;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }
        
        @media (max-width: 768px) {
            .game-board {
                gap: 10px;
            }
            
            .card {
                height: 80px;
            }
            
            .card-face {
                font-size: 1.8rem;
            }
            
            h1 {
                font-size: 2rem;
            }
            
            .info-item {
                font-size: 1rem;
            }
            
            .info-value {
                font-size: 1.4rem;
            }
            
            .difficulty {
                flex-wrap: wrap;
            }
        }
        
        @media (max-width: 480px) {
            .container {
                padding: 15px;
            }
            
            .game-board {
                gap: 8px;
            }
            
            .card {
                height: 70px;
            }
            
            .card-face {
                font-size: 1.5rem;
            }
            
            .btn {
                padding: 10px 20px;
                font-size: 1rem;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <header>
                <h1>记忆翻牌配对游戏</h1>
                <p class="subtitle">翻动卡片，找到所有匹配的图案！</p>
            </header>
            
            <div class="game-info">
                <div class="info-item">
                    <div>时间</div>
                    <div class="info-value">{{ formatTime }}</div>
                </div>
                <div class="info-item">
                    <div>步数</div>
                    <div class="info-value">{{ moves }}</div>
                </div>
                <div class="info-item">
                    <div>配对</div>
                    <div class="info-value">{{ matchedPairs }} / {{ totalPairs }}</div>
                </div>
            </div>
            
            <div class="difficulty">
                <button 
                    v-for="level in difficultyLevels" 
                    :key="level.name"
                    @click="setDifficulty(level)"
                    :class="['difficulty-btn', { active: level.name === currentDifficulty.name }]"
                >
                    {{ level.label }}
                </button>
            </div>
            
            <div 
                class="game-board" 
                :class="'difficulty-' + currentDifficulty.name"
            >
                <div 
                    v-for="(card, index) in cards" 
                    :key="index"
                    class="card"
                    :class="{ flipped: card.isFlipped || card.isMatched }"
                    @click="flipCard(card)"
                >
                    <div class="card-face card-front">
                        {{ card.value }}
                    </div>
                    <div class="card-face card-back">
                        <i class="fa fa-question"></i>
                    </div>
                </div>
            </div>
            
            <div class="controls">
                <button class="btn btn-restart" @click="restartGame">
                    <i class="fas fa-redo"></i> 重新开始
                </button>
                <button class="btn btn-new-game" @click="initGame">
                    <i class="fas fa-plus-circle"></i> 新游戏
                </button>
            </div>
        </div>
        
        <div class="victory" :class="{ active: showVictory }">
            <div class="victory-content">
                <h2>恭喜！你赢了！</h2>
                <div class="victory-stats">
                    用时: <span>{{ formatTime }}</span>
                </div>
                <div class="victory-stats">
                    步数: <span>{{ moves }}</span>
                </div>
                <button class="btn btn-new-game" @click="initGame">
                    <i class="fas fa-play-circle"></i> 再玩一次
                </button>
            </div>
            <div class="fireworks" id="fireworks"></div>
        </div>
    </div>

    <script>
        const { createApp, ref, computed, reactive, onMounted } = Vue;
        
        createApp({
            setup() {
                // 游戏状态
                const cards = ref([]);
                const flippedCards = ref([]);
                const moves = ref(0);
                const matchedPairs = ref(0);
                const totalPairs = ref(0);
                const timer = ref(0);
                const timerInterval = ref(null);
                const gameStarted = ref(false);
                const showVictory = ref(false);
                
                // 难度级别
                const difficultyLevels = [
                    { name: 'easy', label: '简单 (4x4)', pairs: 8 },
                    { name: 'medium', label: '中等 (5x4)', pairs: 10 },
                    { name: 'hard', label: '困难 (6x5)', pairs: 15 }
                ];
                
                const currentDifficulty = ref(difficultyLevels[0]);
                
                // 可用的emoji图案（国内可访问）
                const emojis = [
                    '🐶', '🐱', '🐭', '🐹', '🐰', '🦊', '🐻', '🐼',
                    '🐨', '🐯', '🦁', '🐮', '🐷', '🐸', '🐵', '🐔',
                    '🐧', '🐦', '🐤', '🦆', '🦅', '🦉', '🦇', '🐺',
                    '🐗', '🐴', '🦄', '🐝', '🐛', '🦋', '🐌', '🐞'
                ];
                
                // 格式化时间
                const formatTime = computed(() => {
                    const minutes = Math.floor(timer.value / 60);
                    const seconds = timer.value % 60;
                    return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                });
                
                // 设置难度
                const setDifficulty = (level) => {
                    currentDifficulty.value = level;
                    initGame();
                };
                
                // 初始化游戏
                const initGame = () => {
                    // 重置游戏状态
                    clearInterval(timerInterval.value);
                    timer.value = 0;
                    moves.value = 0;
                    matchedPairs.value = 0;
                    flippedCards.value = [];
                    gameStarted.value = false;
                    showVictory.value = false;
                    
                    // 生成卡片
                    generateCards();
                };
                
                // 生成卡片
                const generateCards = () => {
                    const pairs = currentDifficulty.value.pairs;
                    totalPairs.value = pairs;
                    
                    // 获取指定数量的emoji
                    const selectedEmojis = emojis.slice(0, pairs);
                    
                    // 创建卡片对
                    let gameCards = [];
                    selectedEmojis.forEach(emoji => {
                        gameCards.push({ id: Math.random(), value: emoji, isFlipped: false, isMatched: false });
                        gameCards.push({ id: Math.random(), value: emoji, isFlipped: false, isMatched: false });
                    });
                    
                    // 洗牌
                    cards.value = shuffleArray(gameCards);
                };
                
                // 洗牌算法
                const shuffleArray = (array) => {
                    const newArray = [...array];
                    for (let i = newArray.length - 1; i > 0; i--) {
                        const j = Math.floor(Math.random() * (i + 1));
                        [newArray[i], newArray[j]] = [newArray[j], newArray[i]];
                    }
                    return newArray;
                };
                
                // 翻转卡片
                const flipCard = (card) => {
                    // 如果卡片已经匹配或已经翻开，或者已经翻开了两张卡片，则忽略
                    if (card.isMatched || card.isFlipped || flippedCards.value.length === 2) {
                        return;
                    }
                    
                    // 开始计时
                    if (!gameStarted.value) {
                        gameStarted.value = true;
                        startTimer();
                    }
                    
                    // 翻转卡片
                    card.isFlipped = true;
                    flippedCards.value.push(card);
                    
                    // 检查是否翻开了两张卡片
                    if (flippedCards.value.length === 2) {
                        moves.value++;
                        checkForMatch();
                    }
                };
                
                // 检查匹配
                const checkForMatch = () => {
                    const [card1, card2] = flippedCards.value;
                    
                    // 检查是否匹配
                    if (card1.value === card2.value) {
                        // 匹配成功
                        card1.isMatched = true;
                        card2.isMatched = true;
                        matchedPairs.value++;
                        flippedCards.value = [];
                        
                        // 检查游戏是否结束
                        if (matchedPairs.value === totalPairs.value) {
                            endGame();
                        }
                    } else {
                        // 不匹配，翻转回去
                        setTimeout(() => {
                            card1.isFlipped = false;
                            card2.isFlipped = false;
                            flippedCards.value = [];
                        }, 1000);
                    }
                };
                
                // 开始计时
                const startTimer = () => {
                    timerInterval.value = setInterval(() => {
                        timer.value++;
                    }, 1000);
                };
                
                // 结束游戏
                const endGame = () => {
                    clearInterval(timerInterval.value);
                    setTimeout(() => {
                        showVictory.value = true;
                        createFireworks();
                    }, 500);
                };
                
                // 重新开始游戏
                const restartGame = () => {
                    initGame();
                };
                
                // 创建胜利烟花效果
                const createFireworks = () => {
                    const fireworksContainer = document.getElementById('fireworks');
                    fireworksContainer.innerHTML = '';
                    
                    for (let i = 0; i < 50; i++) {
                        const firework = document.createElement('div');
                        firework.style.position = 'absolute';
                        firework.style.width = '6px';
                        firework.style.height = '6px';
                        firework.style.borderRadius = '50%';
                        firework.style.backgroundColor = getRandomColor();
                        firework.style.left = `${Math.random() * 100}%`;
                        firework.style.top = `${Math.random() * 100}%`;
                        firework.style.animation = `explode 1s ease-out forwards`;
                        fireworksContainer.appendChild(firework);
                    }
                    
                    // 添加CSS动画
                    const style = document.createElement('style');
                    style.textContent = `
                        @keyframes explode {
                            0% { transform: scale(1); opacity: 1; }
                            100% { transform: scale(5); opacity: 0; }
                        }
                    `;
                    document.head.appendChild(style);
                };
                
                // 获取随机颜色
                const getRandomColor = () => {
                    const colors = [
                        '#FF5252', '#FF4081', '#E040FB', '#7C4DFF', 
                        '#536DFE', '#448AFF', '#40C4FF', '#18FFFF',
                        '#64FFDA', '#69F0AE', '#B2FF59', '#EEFF41'
                    ];
                    return colors[Math.floor(Math.random() * colors.length)];
                };
                
                // 初始化游戏
                onMounted(initGame);
                
                return {
                    cards,
                    moves,
                    matchedPairs,
                    totalPairs,
                    timer,
                    formatTime,
                    showVictory,
                    difficultyLevels,
                    currentDifficulty,
                    flipCard,
                    restartGame,
                    initGame,
                    setDifficulty
                };
            }
        }).mount('#app');
    </script>
</body>
</html>